<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 
  el-pagination 分布器
   total:总数
   page-sizes：页容量选项
   page-size：默认页容量 它的值一定要是page-sizes里面的值包含的
current-page：默认页码
layout="total, sizes, prev, pager, next, jumper"
size-change：页容量改变
current-change:页码改变
         -->
      <el-pagination
        :total="pagination.total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        :current-page="pagination.currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./ele.css" />
    <script src="./index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          pagination: {
            total: 31,
            pageSize: 5,
            currentPage: 1,
          },
        },
        methods: {
          handleSizeChange(size) {
            //当前修改后的页容量
            window.console.log(size);
          },
          handleCurrentChange(page) {
            //page当前修改后的页码
            window.console.log(page);
          },
        },
      });
    </script>
  </body>
</html>
